<template>
    <div class="full" v-show="showModal">
        <div class="modal-overlay"></div>
        <div class="modal" :class="[isLogin?'login':'register']" >
            <div>
                <div class="head">
                    <div class="close" @click="close()">×</div>
                    <div class="tab">
                        <span :class="[isLogin? 'tab-active':'tab-other']" @click="isLogin=true;isRegister=false">登录</span>
                        <span :class="[isRegister? 'tab-active':'tab-other']" @click="isRegister=true;isLogin=false">注册</span>
                    </div>
                </div>
                <div class="content">
                    <div class="login" v-show="isLogin">
                        <div class="tittle" >登录Login</div>  
                        <form class="login-form">
                            <div class="form-group">
                                <!-- <label class="modal-label">邮箱</label> -->
                                <input class="login-email" v-model="id" placeholder="手机号" required="required">
                                <span class="tips"></span>
                            </div>
                            <div class="form-group">
                                <!-- <label class="modal-label">密码</label> -->
                                <input type="password" class="login-password" v-model="pwd" placeholder="密码" required="required">
                                <span class="tips"></span>
                            </div>
                            <span class="tips"></span>
                            <span class="forget">忘记密码?</span>
                            <input class="loginBtn" type="submit" value="登录" @click="login()">
                        </form>
                    </div>
                    <div class="register" v-show="isRegister">
                        <div class="tittle" >注册Register</div>
                        <form class="register-form" >
                            <div class="form-group">
                                <input class="register-mobile" v-model="mobile" placeholder="手机号将是你登录的账号哦" required="required">
                            </div>
                            <div class="form-group">
                                <input class="register-name" v-model="name" placeholder="昵称" required="required">
                                <img src="">
                            </div>
                            <div class="form-group">
                                <input class="register-pass" v-model="password" type="password" placeholder="请输入不少于八位密码" required="required">
                                <img src="">
                                <span class="tips"></span>
                            </div>     
                            <div class="form-group">
                                <input class="register-passConfirm" v-model="passConfirm" type="password" placeholder="确认密码" required="required">
                                <img src="">
                                <span class="tips"></span>
                            </div>
                            <input class="registerBtn" type="submit" value="注册" @click="register()">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
/*注册登录框*/
.modal-overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;left: 0;
	background-color: #333;
	/* display: none; */
	text-align: center;
	opacity: 0.5;
	z-index: 1000
}
.modal{
	position: absolute;
    z-index: 1000;
    top:0;left: 0;bottom: 0;right: 0;
    width: 400px;
    background-color: white;
	padding: 20px;
	text-align: center;
	margin: 80px auto 0;
	border-radius: 5px;
	border:1px solid #CCCCCC;
	/* display: none; */
}
.login{
    height: 300px;
}
.register{
	height: 370px;
}
.tab{
	width: 60px;
	height: 100px;
	float: right;
	margin-right: -80px;
	margin-top: 40px;
}
.tab-active,.tab-other{
	display: block;
	margin-top: 10px;
	width: 55px;
	height: 25px;
	line-height: 25px;
	padding: 5px;
	background-color: black;
	color: white;
	font-family: "微软雅黑";
	border: 2px solid black;
}
.tab-active{
	border-radius:5px;
}
.tab-other{
	width: 40px;
	margin-left: 21px ;
	border-left: none;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	color: black;
	background: white;
	text-align: left;
	cursor: pointer;
}
.tittle{
    color:#3EAA4D;
    font-weight: bold;font-size: 20px;font-family: "微软雅黑";
	/*width:100%; */
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin-left:35px; 
}

.form-group{
	height: 55PX;
	width: 330px;
	margin: 0 auto
}
.form-group input{
	float: left;
	border: 2px solid #EEEEEE;
	font-size: 12px;
    border-radius: 2px;
    width: 280px;
    height: 35px;
    margin-left: 5px;
    padding-left: 35px; 
    background-color: #fff 
}
.login-email{
	background: url('../assets/user.png') no-repeat 2% 38%;
	background-size: 20px 20px;
}
.login-password{
	background: url('../assets/password.png') no-repeat 2% 38%;
	background-size: 20px 20px;
}
.forget{
	width: 100px;
	height: 30px;
	display: block;
	font-size: 13px;
	margin-right: 20px;
	/*text-align: right;*/
	float: right;
	color: grey;
}
.loginBtn,.registerBtn{
	width: 300px;
	height: 32px;
	margin: 15px auto 0;
	padding: 0;
	float: none;
	border: none;
    border-radius: 5px;
	color: white;
	background-color: #3EAA4D;
	font-family: "微软雅黑";
	font-size: 16px;
	text-align: center;
	cursor: pointer;
}
.registerBtn{
	margin-top: 20px;
}
.register-form input{
	border: 1px solid #CCCCCC;	
}
.register-name{
	background: url('../assets/user.png') no-repeat 2% 38%;
	background-size: 20px 20px;
}
.register-mobile{
	background: url('../assets/mobile.png') no-repeat 2% 38%;
	background-size: 20px 20px;
}
.register-pass{
	background: url('../assets/password.png') no-repeat 2% 38%;
	background-size: 20px 20px;
} 
.checkBtn{
	width: 100px;
	height: 37px;
	cursor: pointer;
	float: left;
	background-color: #3EAA4D; 
	color: white;
	font-weight: bold;
	border: none;
	font-size: 12px
}
.disabledBtn{
	background-color: grey; 
	cursor: default;
} 
.tips{
	display: block;
	width: 250px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	font-family: "微软雅黑";
	text-align: left;
	color: red;
	margin-left: 5px;
	float: left;
}
.close{
	/*display: block;*/
	width: 20px;
	height: 20px;
	float: right;
	cursor: pointer;
}
</style>
<script>
import axios from "axios"
export default {
  data(){
      return{
          showModal:true,
          id:'',
          pwd:'',
          mobile:'',
          name:'',
          password:'',
          passConfirm:''
      }
  },
  props: ['isLogin','isRegister'],
  methods:{
      close(){
          this.$emit('close',false);
      },
      login(){
          console.log(this.id);
          console.log(this.pwd);
          axios.post('api/user/login',{
              id:this.id,
              pwd:this.pwd
          }).then(Response=>{
              console.log("response")
              console.log(Response);
              if(Response.code==2){
                  localStorage.setItem('Booktoken',JSON.stringify(Response.token))
                  console.log(Response.msg);
                  alert('登录成功~')
                  location.reload()
              }else{
                  console.log(Response.msg);
              }
          })
      },
      register(){
          axios.post('api/user/register',{              
              id:this.mobile,
              pwd:this.password,
              name:this.name
          }).then(Response=>{
              console.log("response")
              console.log(Response);
              if(Response.code==2){
                  localStorage.setItem('Booktoken',JSON.stringify(Response.token))
                  console.log(Response.msg);
              }else{
                  console.log(Response.msg);
              }
          })
      }
  }
}
</script>


